<template>
	<view style="height: calc(100vh - 160rpx);overflow: auto;">
		<view class="ttname">真好吃饭店（龙湖大道好大商场一楼 100 号）</view>
		<uni-forms label-width="120">
			<view class="whiteItem">

				<view>
					<uni-forms-item label="20元快餐(午饭)" required>
						<uni-number-box @change="changecarNum" :min="0" value="0"
							:max="10">
						</uni-number-box>
					</uni-forms-item>
					<uni-forms-item label="15元快餐(午饭)" required>
						<uni-number-box @change="changecarNum" :min="0" value="0"
							:max="10">
						</uni-number-box>
					</uni-forms-item>
				</view>
				<uni-forms-item label="送餐时间">
					<uni-datetime-picker ref="rzRangeForm" v-model="rzRange" type="datetime" return-type="string"
						@change="getTime" />
				</uni-forms-item>
				<uni-forms-item label="联系电话" required>
					<uni-easyinput type="number" v-model="form.phone" placeholder="请输入联系电话" />
				</uni-forms-item>
				<uni-forms-item label="备注" required>
					<uni-easyinput type="textarea" v-model="form.phone" placeholder="" />
				</uni-forms-item>
			</view>


			<view style="height: 80rpx;"></view>

		</uni-forms>
	</view>
	<view class="bbfix">
		<!-- 底部提交 -->
		<view class="price">
			总价：
			<text>￥{{ money }}</text>
		</view>
		<view class="chooseNum" @click="popChoose">
			<uni-icons type="bottom" size="20"></uni-icons>
		</view>
		<view class="subBtn" @click="submit">提交订单</view>
	</view>


	<uni-popup ref="popup" background-color="#fff" type="bottom">
		<view class="popup-content ccitemBox">
			<label> 餐饮费<text
					style="float: right;">¥{{(roomInfo.roomPrice*form.roomNum*choseRooms.length).toFixed(2)}}</text></label>
			<view class="ccitem" v-for="(c, index) in choseRooms" :key="index">
				两荤三素
				<text>{{form.roomNum}}*¥{{roomInfo.roomPrice}}</text>
			</view>


			<label>共计<text style="float: right;">¥{{money}}</text></label>


		</view>
	</uni-popup>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		getCurrentInstance,
		nextTick
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import * as hotel from '@/common/hotel.js';
	import dayjs from 'dayjs'
	import {
		checkUserAuth
	} from '../../common/login';
	const {
		proxy
	} = getCurrentInstance()
	const data = reactive({
		form: {
			roomNum: 0,
			addNum: 0
		},
		popup: null,
		roomInfo: {},
		rzUserArr: [''],
		choseRooms: [],
		hotelName: '',
		yesno: [{
			text: ' 是 ',
			value: '1'
		}, {
			text: ' 否 ',
			value: '0'
		}],
		canOrderStart: '',
		canOrderEnd: '',
		rzRange: [],
		money: '',
		canOrderNum: 0
	})
	const {
		form,
		roomInfo,
		hotelName,
		yesno,
		canOrderStart,
		canOrderEnd,
		rzRange,
		money,
		rzUserArr,
		choseRooms,
		popup,
		canOrderNum
	} = toRefs(data);

	let usedays = 1
	onLoad((options) => {
		if ('room' in options) {
			roomInfo.value = JSON.parse(decodeURIComponent(options.room));
			if (roomInfo.value.addBedFlag == '1') {
				form.value.isAddbed = '0'
			}
		}
		console.log(roomInfo.value)
		hotelName.value = options.hotelName
		// money.value = roomInfo.value.roomPrice
		money.value = 0

		init()
	})
	onShow(() => {

	})

	function init() {
		// 获取当前日期时间
		var date = new Date();
		var year = date.getFullYear();
		var month = date.getMonth() + 1;
		var day = date.getDate();
		month = (month > 9) ? month : ("0" + month);
		day = (day < 10) ? ("0" + day) : day;
		var today = year + "-" + month + "-" + day;
		var nowTime = date.toLocaleTimeString();
		canOrderStart.value = today
		if (roomInfo.value.hqNewStart < canOrderStart.value) {
			roomInfo.value.hqNewStart = canOrderStart.value
		}

		// var tomorrow = dayjs(roomInfo.value.hqNewStart).add(1,'day')
		// rzRange.value = [roomInfo.value.hqNewStart,tomorrow]
		// rzRange.value[0] = roomInfo.value.hqNewStart
		// rzRange.value=['2023-07-14','2023-07-16']
	}

	function getDate(datestr) {
		var temp = datestr.split("-");
		if (temp[1] === '01') {
			temp[0] = parseInt(temp[0], 10) - 1;
			temp[1] = '12';
		} else {
			temp[1] = parseInt(temp[1], 10) - 1;
		}
		//new Date()的月份入参实际都是当前值-1
		var date = new Date(temp[0], temp[1], temp[2]);
		return date;
	}

	function getTime() {

	}

	function countMoney() {
		money.value = ((roomInfo.value.roomPrice * form.value.roomNum * usedays) + (roomInfo.value.bedPrice * form.value
			.addNum * usedays)).toFixed(2)
		// console.log(usedays,money.value)
	}

	function submit() {
		if (!form.value.rzStart) {
			uni.showToast({
				title: '请选择入住时间',
				icon: 'none',
				duration: 2000
			})
			return
		}
		if (!form.value.ddDate) {
			uni.showToast({
				title: '请选择预计到店时间',
				icon: 'none',
				duration: 2000
			})
			return
		}
		var pattern = /^1[345789]\d{9}$/;
		if (!pattern.test(form.value.phone)) {
			uni.showToast({
				title: '请输入正确的手机号',
				duration: 2000,
				icon: 'none'
			})
			return
		}
		let arr = []
		for (var n of rzUserArr.value) {
			console.log(n)
			if (n == '' || n == undefined) {
				uni.showToast({
					title: '请填写入住人信息',
					icon: 'none',
					duration: 2000
				})
				return
			} else {
				arr.push(n)
			}
		}
		form.value.rzUsers = arr.toString()

		form.value.activeId = roomInfo.value.activityId
		form.value.ahId = roomInfo.value.hotelId
		form.value.ahrId = roomInfo.value.id


		uni.showModal({
			title: '提示',
			content: '确定提交订单吗',
			success: function(res) {
				if (res.confirm) {
					hotel.submitOrder(form.value).then(res => {
						// 去付钱
						if (res.data) {
							if (res.data.roomNum == -100) {
								uni.showToast({
									title: '剩余车辆不足',
									icon: 'none',
									duration: 2000
								})
								checkreRooms()
							} else {
								let path =
									`/pages_hotel/hotel/pay?money=${res.data.total}&orderId=${res.data.id}`;
								uni.redirectTo({
									url: path
								});
							}

						} else {
							uni.showToast({
								title: ' 无可预定的车辆 ',
								icon: 'none',
								duration: 2000
							})
						}
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	}

	function popChoose() {
		popup.value.open()
	}

	function changeRoomNum(e) {

		if (form.value.addNum > e) {
			form.value.addNum = e
		}
		rzUserArr.value.length = e
		// console.log(e,rzUserArr.value)
		countMoney()
	}

	function changeTimeRange() {

	}

	function initDate() {
		if (proxy.$refs.rzRangeForm.$refs.mobile.aniMaskShow) {
			return
		}
		if (rzRange.value.length > 0) {
			return
		}
		proxy.$refs.rzRangeForm.$refs.mobile.init(roomInfo.value.hqNewStart)
	}
</script>

<style lang="scss" scoped>
	.ttname{padding: 30rpx;font-size: 30rpx;}


	.whiteItem {
		width: 700rpx;
		box-sizing: border-box;
		margin: 0 auto 26rpx;
		padding: 26rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 27rpx 0rpx #DEDEDE;
		border-radius: 15rpx;
	}

	.roomType {
		color: #4C5359;
		font-size: 28rpx;
		margin: 10rpx 0;
	}

	.roomInfo {
		color: #4C5359;
		font-size: 28rpx;

		text {
			position: relative;
			font-weight: 300;

			&:after {
				content: '|';
				color: #D2D7D9;
				margin: 0 8rpx;
			}

			&:last-child:after {
				display: none;
			}
		}

	}

	.tip {
		font-size: 28rpx;
		color: #E60012;
		padding: 0 30rpx;
	}

	.bbfix {
		background: #fff;
		height: 150rpx;
		display: flex;
		position: fixed;
		z-index: 89;
		width: 100%;
		bottom: 0;
		align-items: baseline;
		justify-content: space-between;
		border-top: 1rpx solid #dcdcdc;

		.price {
			padding-left: 20rpx;

			text {
				font-weight: bold;
				font-size: 45rpx;
				color: #ff8124;
			}
		}

		.subBtn {
			font-size: 36rpx;
			color: #ffffff;
			background: #ff8124;
			height: 120rpx;
			line-height: 100rpx;
			padding: 0 30rpx;
		}
	}

	.ccitemBox {
		height: 60vh;
		overflow: auto;

		label {
			margin: 10rpx 0;
			display: block;

			text {
				color: #1EC886;
				font-size: 32rpx;
			}
		}
	}

	.ccitem {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		color: #666;
		margin: 10rpx 0;

		label {
			font-size: 32rpx;
			color: #000;
		}

		text {
			font-size: 26rpx;
		}
	}

	:deep(.uni-forms-item__inner) {
		padding-bottom: 30rpx;
		align-items: baseline;
	}

	.nopadding :deep(.uni-forms-item__inner) {
		padding: 0;
	}

	.colorfulBg {
		background: #1EC886;
		padding: 20rpx 10rpx 10rpx;

		.whiteItem {
			border-radius: 0;
			margin: 0;
			width: 730rpx;
		}

		.name {
			color: #fff;
			margin: 0 0 20rpx;
		}
	}
</style>